<!--车辆进出统计-->
<template>
    <div class="carCensus">
        <CommonTitleComponent text="车辆进出统计"></CommonTitleComponent>
        <ul>
            <li>
                <img src="@img/cars.png" alt="" />
                <div class="fr">
                    <p>今日进入</p>
                    <div>200车次</div>
                </div>
            </li>
            <li>
                <img src="@img/cars.png" alt="" />
                <div class="fr">
                    <p>今日驶出</p>
                    <div class="customClass">200车次</div>
                </div>
            </li>
        </ul>
    </div>
</template>
<style lang="scss" scoped>
.carCensus {
    height: 18%;
    margin-top: vh(8);
    ul {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: vh(18);
        li {
            display: flex;
            align-items: center;
            img {
                width: vw(66);
                height: auto;
                margin-right: 6px;
            }
            .fr {
                letter-spacing: 1px;
                p {
                    color: #fff;
                    font-size: 12px;
                }
                div {
                    font-size: 16px;
                    background: linear-gradient(0deg, #2df6a3 0%, #19f4f1 100%);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    margin-top: vh(12);
                    @include pmzd();
                }
                .customClass {
                    background: linear-gradient(0deg, #fedb35 0%, #fd894e 100%);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                }
            }
        }
    }
}
</style>
